<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品销量查询</title>
    <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/css/layui.css">
    <script src="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>
    <script src="/static/lib/jquery-1.9.1.min.js"></script>
    <script src="/static/lib/echarts.min.js"></script>
    <style>
        body{
            background-color: rgb(72, 129, 177);
        }
        .serchar{
            position: absolute;
            top: 10px;
            right: 30px;
        }
        .layui-input{
            border: 0;
            background-color:transparent;
            border-bottom: #fff solid 1px;
            color: #fff;
        }
        input::-webkit-input-placeholder {
            color: #fff;
        }
        input::-moz-input-placeholder {
            color: #fff;
        }
        input::-ms-input-placeholder {
            color: #fff;
        }
        .layui-form-mid{
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="layui-form-item serchar">
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="dateStart" id="dateStart" placeholder="起始时间" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="dateEnd" id="dateEnd" placeholder="结束时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
            </div>
        </div>
    </div>
    <div id="chart_4" class="echart" style="width: 50%; height: 300%; position: absolute;"></div>
</body>
<script>

layui.use(['table','laydate','form','util'], function(){
        var $ = layui.jquery;
        var laydate =layui.laydate;
        var form =layui.form;
        laydate.render({
            elem: '#dateStart',
            type: 'datetime',
            theme: '#393D49',
        });
        laydate.render({
            elem: '#dateEnd',
            type: 'datetime',
            theme: '#393D49',
        });
        form.on('submit(demo1)', function(data){
            if ($('#dateStart').val() != '' && $('#dateEnd').val() != '') {
                var start_time = new Date($('#dateStart').val()).getTime() / 1000
                var end_time = new Date($('#dateEnd').val()).getTime() / 1000
                echart_4(start_time,end_time); 
            }
            return false;
        });
        echart_4(Math.round(new Date() / 1000) -6048000,Math.round(new Date() / 1000));
        
        
        // $(document).off('click','.list-1').on("click",".list-1",function(){
        //     $(this).addClass('active').siblings('div').removeClass('active')
        //     var w = $(this).attr('data-value')
        //     var start_time = Math.round(new Date() / 1000) - w
        //     var end_time = Math.round(new Date() / 1000)
        //     echart_4(start_time,end_time);
        // })
        
 

        function echart_4(start,end) {
            // searchVolume(start,end);
            setInterval(searchVolume(start,end),10000)
            // 使用刚指定的配置项和数据显示图表。
        }

    });

    function searchVolume(start,end){
        var myChart = echarts.init(document.getElementById('chart_4'));
        $.ajax({
            type: "get",
            url: "/admin/statistic/queryCommoditySalesStatistic",
            data: {start:start,end:end},
            dataType: "json",
            success: function (data) {
                var data =data.data
                var titlename = [];
                var cdata = [];
                var listData = []
                data.forEach(element => {
                    titlename.push(element.commodityName);
                    cdata.push(element.count)
                });
                var dmax = Math.max(...cdata)
                for (let i = 0; i < data.length; i++) {
                    listData.push(dmax);
                }
                // 基于准备好的dom，初始化echarts实例
                // var data = [70, 34, 60, 78, 69];
                // var titlename = [y, '2号机', '3号机', '4号机', '5号机'];
                var valdata = [];
                var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
                myChart.setOption({
                    title: {
                        text: '商品畅销榜',
                        x: 'center',
                        textStyle: {
                            color: '#FFF'
                        },
                        left: '6%',
                        top: '0%'
                    },
                    //图标位置
                    grid: {
                        top: '2%',
                        left: '32%'
                    },
                    xAxis: {
                        show: false
                    },
                    yAxis: [{
                        show: true,
                        data: titlename,
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#fff',
                            formatter: (value, index) => {
                                return [

                                    `{lg|${index+1}}  ` + '{title|' + value + '} '
                                ].join('\n')
                            },
                            rich: {
                                lg: {
                                    backgroundColor: '#339911',
                                    color: '#fff',
                                    borderRadius: 15,
                                    // padding: 5,
                                    align: 'center',
                                    width: 15,
                                    height: 15
                                },
                            }
                        },
                    }, {
                        show: true,
                        inverse: true,
                        data: valdata,
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: '#fff',
                            },
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                    }],
                    series: [{
                        name: '条',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: cdata,
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,
                                color: function(params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num]
                                },
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                formatter: '{c}'
                            }
                        },
                    }, {
                        name: '框',
                        type: 'bar',
                        yAxisIndex: 1,
                        barGap: '-100%',
                        // data: [dmax, dmax, dmax, dmax, dmax],
                        data: listData,
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: 'none',
                                borderColor: '#00c1de',
                                borderWidth: 3,
                                barBorderRadius: 15,
                            }
                        }
                    }, ]
                })
            }
        });
    }

</script>
</html>
